<template>
<div class="container">
    <div class="top-title">
        <h1 class="title">个人中心</h1>
        <Change-pass></Change-pass>
    </div>
    <!--基本信息-->
    <div class="Basics-box mb-20">
        <h1 class="Basics-title">
            <h2>基础信息</h2>
        </h1>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :border="true">
            <el-table-column label="登录名" width="309" prop="loginName" align="center"></el-table-column>
            <el-table-column prop="realName" label="用户名称" width="360" align="center"></el-table-column>
            <el-table-column prop="orgPath" label="所属部门/岗位" show-overflow-tooltip width="512" align="center"></el-table-column>
            <el-table-column prop="roleInfo" label="所属角色" show-overflow-tooltip width="360" align="center"></el-table-column>
        </el-table>
    </div>
    <!--扩展信息-->
    <div class="Basics-box mb-20 extend">
        <h1 class="Basics-title">
            <h2>扩展信息</h2>
        </h1>
        <el-table ref="multipleTable" :data="tableData2" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange2" :border="true">
            <el-table-column label="用户电话" width="386" prop="phone" align="center">
                <template slot-scope="scope">
                    <el-input :disabled="isTrue" v-model="scope.row.phone" class="text" :class="[isTrue?'':'borderBlue']"></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="email" label="电子邮件" width="615" align="center">
                <template slot-scope="scope">
                    <el-input :disabled="isTrue" v-model="scope.row.email" class="text" :class="[isTrue?'':'borderBlue']"></el-input>
                </template>
            </el-table-column>

            <el-table-column prop="avatar" label="上传头像" show-overflow-tooltip width="385" align="center">
                <template slot-scope="scope">
                    <!--图片上传-->
                    <div class="upload-box">
                        <el-upload action list-type="picture-card" :file-list="fileList" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="handleChange" :disabled="isTrue">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" :class="[isTrue? 'stop':'']">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" :class="[isTrue? 'stop':'']">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt />
                        </el-dialog>
                    </div>
                    <!--图片上传结束-->
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" show-overflow-tooltip width="155" align="center">
                <template slot-scope="scope">
                    <span v-if="isTrue" class="bt-change" @click="changeBuild">编辑</span>
                    <span v-else class="bt-change" @click="Submit">保存</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script>
import ChangePass from "./ChangePass/ChangePass";
import Upload from "@/components/Upload/Upload";

export default {
    components: {
        ChangePass,
        Upload,
    },
    data() {
        return {
            //图片上传
            dialogImageUrl: "",
            //控制图片是否课件
            dialogVisible: false,
            //控制按钮是否课件
            disabled: false,
            fileList: [],
            //-----
            isTrue: true,
            //表格数据
            tableData: [],
            tableData2: [],
            multipleSelection: [],
            multipleSelection2: [],
            PicSpace: "",
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    created() {
        this.getpersion();
    },
    methods: {
        //调用个人的详情
        getpersion() {
            this.Api.getPersion().then((res) => {
                // console.log(res,111)
                if (res.code === "0") {
                    this.tableData.push(res.data);
                    // console.log(this.tableData, 111)
                    this.tableData2.push(res.data);
                    this.fileList = [{
                        url: this.$store.state.PortalManagement.fileIp + res.data.avatar,
                    }, ];
                    console.log(this.tableData, 111)
                    this.PicSpace = res.data.avatar
                    // console.log(this.PicSpace, " this.PicSpace ")
                }
            });
        },
        //编辑按钮保存
        changeBuild() {
            this.isTrue = !this.isTrue;
        },
        Submit() {
            // console.log(this.tableData2[0].phone)
            this.isTrue = !this.isTrue;
            this.Api.getPersionChange({
                phone: this.tableData2[0].phone,
                email: this.tableData2[0].email,
                avatar: this.PicSpace,
            }).then((res) => {
                if (res.code === "0") {
                    // console.log(res, "提交成功");
                    this.$message.success("修改成功");
                }
            });
        },
        //表格方法
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSelectionChange2(val) {
            this.multipleSelection2 = val;
        },
        //图片上传的方法
        handleChange(file, fileList) {
            // console.log(file, fileList);
            const formData = new FormData();
            //在file里面追加一个对象
            formData.append("file", file.raw);
            // console.log(formData,111)
            this.Api.uploadImage(formData).then((res) => {
                // var data = { ...this.ruleForm, picUrl: res.data.url };
                console.log(res, 111);
                // this.$emit("update:ruleForm", data);
                this.PicSpace = res.data.url;
            });
        },
        handleRemove(file) {
            this.fileList = [];

            // console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传限定图片类型
        beforeAvatarUpload(file) {
            const isJPG = file.type === "png/jpeg/jpg";
            const isLt2M = file.size / 180 / 52 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是png/jpeg/jpg格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小约为180*52!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;

        h1 {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
        }
    }

    .Basics-box {
        .Basics-title {
            padding: 26px 0;

            >h2 {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
                border-left: 4px solid #3d7fff;
                padding: 0 0 0 10px;
            }
        }

        /deep/.el-table {
            //表头盒子
            .el-table__header-wrapper {

                //表头
                .el-table__header {

                    //表头
                    .has-gutter {
                        tr {
                            th {
                                padding: 11px 0;
                                background-color: #fafafc;

                                .cell {
                                    font-size: 14px;
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    font-weight: 600;
                                    color: rgba(0, 0, 0, 0.85);
                                }
                            }
                        }
                    }
                }
            }

            //表格内容
            .el-table__body-wrapper {
                .el-table__body {
                    .el-input__inner {
                        color: #333333;
                        border: 0 !important;
                        background-color: white;
                        padding: 0;
                    }

                    tbody {
                        tr {
                            td {
                                padding: 12px 0;

                                .cell {
                                    font-size: 14px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: rgba(0, 0, 0, 0.85);
                                    line-height: 21px;
                                }

                                .upload-box {
                                    margin: 0 auto;
                                }
                            }
                        }

                        //修改输入框
                        tr td:nth-child(2) {
                            .cell {
                                .text {
                                    input {
                                        width: 562px;
                                        height: 56px;
                                        background: rgba(255, 255, 255, 1);
                                        border-radius: 4px;
                                        border: 1px solid rgba(221, 221, 221, 1);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .extend {

        /deep/.el-table {
            //表格内容
            .el-table__body-wrapper {
                .el-table__body {
                    tbody {
                        tr td:last-child {
                            .cell {
                                color: #3d7fff !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

.mb-20 {
    margin-bottom: 20px;
}

//扩展信息高度修改
/deep/.text {
    input {
        text-align: center;
        width: 363px;
        height: 56px;
    }
}

.bt-change {
    cursor: pointer;
}

//图片上传
/deep/.el-upload--picture-card {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 66px;
    height: 66px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 10px;
}

/deep/.el-icon-delete {
    font-size: 10px;
}

.upload-box {
    width: 66px;
    height: 66px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload-list__item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stop {
    pointer-events: none;
}

.borderBlue {
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
}
</style>
